import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import Highcharts3D from 'highcharts/highcharts-3d';
import { useTranslation } from 'react-i18next';

Highcharts3D(Highcharts);

const Column3DChart = ({ dataRank3D }) => {
  const { t } = useTranslation();

  const options = {
    chart: {
      type: 'column',
      options3d: {
        enabled: true,
        alpha: 10,
        beta: 25,
        depth: 70,
      },
      style: {
        fontSize: '1em'
    },
      height:430
    },
    title: {
      text: t('Operator Ranking'),
      align: 'center'
    },
    subtitle: {
      text: t('We will re-evaluate the rankings every month'),
      align: 'left'
    },
    plotOptions: {
      column: {
        depth: 25
      }
    },
    xAxis: {
      type: 'category',
      labels: {
        skew3d: true,
        style: {
          fontSize: '16px'
        }
      }
    },
    yAxis: {
      title: {
        text: t('score'),
        margin: 20
      }
    },
    tooltip: {
      valueSuffix: ' MNOK'
    },
    series: [{
      name: '',
      data: dataRank3D, // Pass the data here
    }],
    credits: {
      enabled: false, // 是否显示版权链接
  }
  };

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

export default Column3DChart;